<template>
	<view class="content page-content">
		<view class="box">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" placeholder="请输入" confirm-type="search" v-model="kwd"></input>
					<button class="cu-btn search-btn shadow-blur round" @click="onSearch">搜索</button>
					
				</view>
				<!-- <view class="cu-btn cate-btn shadow-blur round" v-if="tabCurrentIndex<3">
					<picker @change="cateChange" :value="cateIndex" :range="catePicker" :range-key="'name'">
						<view class="picker input">
							<image src="/static/images/shaixuan.png" class="png" mode="aspectFit"></image>
						</view>
						
					</picker>
				</view> -->
			</view>
			<view class="navbar">
				<view 
					v-for="(item, index) in navList" :key="index" 
					class="nav-item" 
					:class="{current: tabCurrentIndex === index}"
					@click="tabClick(index)"
				>
					{{item.text}}
				</view>
			</view>
		</view>
		<scroll-view
			class="list-scroll-content" 
			scroll-y
			@scrolltolower="loadData('add')"
		>
			<!-- 空白页 -->
			<empty v-if="loaded === true && tableList.length === 0"></empty>
			
			<view class="cu-list menu-avatar" v-for="(item,index) in tableList" :key="index" @click="goDetail(item)">
				
				<view class="cu-item " >
					<view class="content">
						<view class="col-1 flex ">
							<image class="company-img" :src="bg_img[tabCurrentIndex]" ></image>
							<view class="flex-sub padding-left text-con"><view class="text-black text-lg text-title">{{item.title}}</view>
							<view class="text-grey text-df dsc">内容简介：{{item.description}}</view>
							
							<view class="text-grey text-df between">
								
								<view class="cu-btn agree round">￥9.9</view>
								<view class="">{{item.release_at}}</view>
								<!-- <view class="icon"  @click.stop=""> -->
								<view class="icon">
									<!-- <text class="lg text-gray cuIcon-favor" @click="doFavor"></text> -->
									<text class="lg text-gray cuIcon-down" @click="doDown"></text>
								</view>
							</view>
							</view>	
						</view>
					</view>
				</view>
			</view>
			 
			<!-- <uni-load-more :status="tabItem.loadingType"></uni-load-more> -->
			
		</scroll-view>
		<view class="cu-modal" :class="modalName=='conform'?'show':''"  @tap="hideModal">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content" style="color: #4CA5FE;">下载确认</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="color: #FE4C4C;">
					确认消耗{{fileItem.price}}金币下载《{{fileItem.title}}》文件
				</view>
				<view class="cu-bar bg-white">
					<text class=" sure-btn solid-left" @tap="sureBuy">确定</text>
				</view>
			</view>
		</view>
	</view>
</template> 

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				loaded:false,
				navList: [{
						state: 0,
						text: '模板文档',
						loadingType: 'more',
						value:'mod',
						orderList: []
					},
					{
						state: 1,
						text: '参考文件',
						loadingType: 'more',
						value:'word',
						orderList: []
					},
					// {
					// 	state: 2,
					// 	text: '收藏资料',
					// 	loadingType: 'more',
					// 	value:2,
					// 	orderList: []
					// },
					// {
					// 	state: 3,
					// 	text: '已购资料',
					// 	loadingType: 'more',
					// 	value:1,
					// 	orderList: []
					// },
				
				],
				modalName: null,
				bg_img:['https://ts.dxsjxzd.com/file/2020-11-27/mbbg.jpg','https://ts.dxsjxzd.com/file/2020-11-27/wjbg.jpg'],
				// modalName: 'conform',
				catePicker: [{id:0,name:'全部类型'}],
				cateIndex:'mod',
				cateId:'mod',
				typeId:0,
				uId:0,
				page:1,
				fileItem:'',
				kwd:'',
				tableList:[],
			};
		},
		
		onLoad(){
			this.uId = uni.getStorageSync('userId');
			// this.getCates();
			this.page=1;
			this.tableList=[];
			this.loadData('refush');
		},
		 
		methods: {
			//获取订单列表
			async loadData(type='add'){
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				
				navItem.loadingType = 'loading';
				let param = {
					kwd:this.kwd,
					type:this.cateId,
					// user_id:this.uId,
					page:this.page,
					limit:5,
					};
				let that = this;
				let data = await this.$http.post(
					'wx/article_list', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				console.log(data);
				// if(data.last_page<=that.page){
				// 	navItem.loadingType = 'noMore';
				// }
				// else{
				// 	navItem.loadingType = 'more';
				// }
				if(data!=undefined&&data.length>0){
					that.tableList=that.tableList.concat(data)
					that.page++;
				}
				
				console.log(that.tableList);
				// that.tableList.push(data.data);
				that.$set(navItem, 'loaded', true);
				
				this.loaded = true;
				// setTimeout(()=>{
					
				// 	this.$set(navItem, 'loaded', true);
					
				// 	//判断是否还有数据， 有改为 more， 没有改为noMore 
				// 	navItem.loadingType = 'more';
				// }, 600);	
			}, 
			goDetail(item){
				this.fileItem = item;
				item.is_buy = 2;
				if(item.is_buy==2){
					this.downLoad(this.fileItem.file_path);
				}
				else{
					this.modalName = 'conform';
				}
			},
			async sureBuy(){
				//购买流程
				let param = {
					price:this.fileItem.price,
					user_id:this.uId,
					file_id:this.fileItem.id,
					pay_way:1,
					order_type:2,
					};
				let that = this;
				let data = await this.$http.post(
					'trainBuy', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				console.log(data);
				
				this.downLoad(this.fileItem.file_path);
			},
			downLoad(path){
				uni.downloadFile({
					url: path, 
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							var filePath = res.tempFilePath;
							uni.openDocument({
									filePath: filePath,
									success: function (res) {
									console.log('打开文档成功');
								}
							});
							this.hideModal();
						}
					}
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index){
				let t = this;
				
				t.tabCurrentIndex = index;
				let tab = t.navList[index];
				console.log(index)
				t.cateId = tab.value;
				// t.cateIndex = -1;
				t.page=1;
				t.tableList=[];
				t.loadData('refush');
			},
			onSearch(){
				this.typeId=0;
				this.cateId=0;
				this.page=1;
				this.tableList=[];
				this.loadData('refush');
			},
			async getCates(){
				let param = {type:8};
				let that = this;
				let data = await this.$http.post(
					'employType', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				let trainTypes = []
				data.forEach((item) => {
					trainTypes = {id:item.id,name:item.name}
					that.catePicker=that.catePicker.concat(trainTypes);
				})
				that.page=1;
				that.loadData('refush');
				// console.log(data);
			},
			cateChange(e){
				let index = e.detail.value
				this.cateIndex = index;
				let cateId = this.catePicker[index].id;
				
				console.log(cateId)
				this.cateId = cateId>0?cateId:0;
				this.page=1;
				this.tableList=[];
				this.loadData('refush');
			},
		},
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		height: 100Vh;
		width: 100vw;
	}
	.cu-bar{
		min-height: 40px;
		.search-form{
			height:65rpx;
			// margin-right: 0;
		}
	}
	.page-content{
		background: $page-color-base;
		height: 100%;
		padding-top: 96px;
		.box{
			position: fixed !important;
			top:0px;
			width: 100%;
			z-index:999;
		}
	}
	.search-btn{
		background-color: #4CA5FE !important;
		color: #FFF;
		height: 65rpx;
	}
	.cate-btn{
		background-color: #FFFFFF !important;
		width: 32px;
		color: #FFF;
		margin: 0 10px;
		image{
			width: 16px;
			height: 16px;
		}
	}
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 600px;
	}
	
	.navbar{
		display: flex;
		height: 36px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: #4CA5FE;
			}
		}
		
	}

	.uni-swiper-item{
		height: auto;
	}
	
	.cu-list>.cu-item.move-cur {
		transform: translateX(-100upx)
	}
	.cu-list>.cu-item .move {
		right: 5px;
		width: 110upx;
	}
	
	.cu-list.menu-avatar {
		margin: 15px;
	}
	
	.cu-item{
		padding: 0 !important;
		height: 90px !important;
		background-color: #F2F6F8 !important;
		margin-bottom: 15px !important;
	}
	.cu-list.menu-avatar>.cu-item .content {
		width: 100%;
		line-height: 1.6em;
		left: 1px;
		background: #FFF;
		z-index: 10;
		border-radius: 10px;
		padding: 10px;
	}
	
	.company-img{
		width: 50px;
		height: 70px;
	}
	.dsc{
		height: 40px !important;
		line-height: 18px !important;
	}
	.between{
		justify-content: space-between;
		display: flex;
	}
	.line{
		border-bottom: 1px solid #4CA5FE;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	
	.text-white{
		margin: 0px 15px;
		font-size: 14px;
		text-align: center;
	}
	
	.text-title{
		font-size: 16px !important;
		font-weight: bold;
	}
	
	.text-con{
		width: 60%;
		// height: 120px;
		font-size: 12px;
		line-height: 15px;
		// margin-right: 15px;
		.text-df{
			height: 20px;
			padding-top: 5px;
			line-height: 12px;
			font-size: 12px;
			overflow: hidden;
		}
	}
	.icon{
		font-size: 14px;
		width: 42px;
		justify-content: space-between;
		display: flex;
	}
	.radius{
		border-radius: 10px;
	}
	
	.bg-red {
		border-radius: 0 10px 10px 0;
	}
	.text-info{
		width: 200px;
		height: 30px;
		line-height: 30px;
		overflow: hidden;
		font-size: 14px;
		text{
			margin-right: 20px;
		}
	}
	.col-1{
		justify-content: space-between;
	}
	.agree{
		padding-left: 0;
		justify-content: left;
		width: 45px;
		height: 14px;
		font-size: 12px;
		background-color: #FFFFFF !important;
		color: #FC7A7A;
	}
	.reward{
		color: #FF4400;
		font-size: 20px;
		font-weight:bold;
		top: -45px;
		position: relative;
	}
	.sure-btn{
		width: 70%;
		height: 28px;
		background: #4CA5FE;
		border-radius: 6em;
		margin: 0 15%;
		line-height: 28px;
		color: #FFFFFF;
	}
	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}
	
	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}
	
	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}
	
	.uni-load-more__img>view {
		position: absolute
	}
	
	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}
	
	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}
	
	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}
	
	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}
	
	.load2 {
		transform: rotate(30deg)
	}
	
	.load3 {
		transform: rotate(60deg)
	}
	
	.load1 view:nth-child(1) {
		animation-delay: 0s
	}
	
	.load2 view:nth-child(1) {
		animation-delay: .13s
	}
	
	.load3 view:nth-child(1) {
		animation-delay: .26s
	}
	
	.load1 view:nth-child(2) {
		animation-delay: .39s
	}
	
	.load2 view:nth-child(2) {
		animation-delay: .52s
	}
	
	.load3 view:nth-child(2) {
		animation-delay: .65s
	}
	
	.load1 view:nth-child(3) {
		animation-delay: .78s
	}
	
	.load2 view:nth-child(3) {
		animation-delay: .91s
	}
	
	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}
	
	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}
	
	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}
	
	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}
	
	@-webkit-keyframes load {
		0% {
			opacity: 1
		}
	
		100% {
			opacity: .2
		}
	}
</style>
